<style lang="stylus" scoped>
  .home
    .top-info
      display flex
      position fixed
      left 0
      width 100%
      height 3.5rem
      background-color rgba(30,30,30,.8)
      text-align center
      .top-info-data
        display flex
        width 100%
        justify-content center
        text-align center
        padding .7rem 0
        .key-num
          width 15%
          display inline-block
          line-height 2rem
          height 2rem
          font-size 0
          img 
            height 1.4rem
            vertical-align middle
            margin-right .3rem
          em
            display inline-block
            vertical-align middle
            font-size 1.2rem
            line-height 2rem
            color #fff
        .coin
          display flex
          width 8rem
          box-sizing border-box
          height 2rem
          border .2rem solid #e0d1aa
          border-radius 12rem
          img 
            height 1.4rem
            margin .2rem 0 0 .1rem
          em
            flex 1
            font-size 1.2rem
            color #fff
            text-align right
            padding-right .5rem
        .ml5
          margin-left .5rem!important
        .main-email,.main-setting
          position relative
          height 2rem
          box-sizing border-box
          padding .4rem 1rem
          text-align center
        .main-email
          margin-left 3.5rem
          img 
            height 100%
            margin 0 auto
        .main-setting img 
          height 1.5rem
          margin 0 auto !important
    .container
      box-sizing: border-box;
      .main-show-data
        position: fixed;
        top: 40%;
        left: 50%;
        margin-left: -45%;
        width: 90%;
        height: auto;
        transform: translate3d(0,-50%,0);
        .container-logo
          width: 100%;
          height: 10rem;
          img 
            width: 100%;
            height: 100%;
            border-radius: 1rem;
        h3
          margin-top: 1.5rem;
          height: 3rem;
          line-height: 3rem;
          font-size: 2rem;
          color: #fff;
          text-align: center;
          background: url(../assets/text-bg.png) center center no-repeat;
          background-size: 100%;
          color: #dfc78c;
        .ETH-img
          margin: .5rem 0;
          text-align: center;
          img 
            width: 2.5rem;
        .bonus-pool
          height: 4rem;
          margin-top: .5rem;
          .slide
            text-align: center;
            strong
              font-size: 3.4rem;
              color: #fff;
              vertical-align: middle;
        .count-down
          display: block;
          margin-top: .5rem;
          width: 100%;
          text-align: center;
          font-size: 1.6rem;
          color: #fff;
      .data-swiper
        position: absolute;
        left: 5%;
        bottom: 10rem;
        width: 90%;
        height: 3rem;
        line-height: 3rem;
        border: .1rem solid #e0d1aa;
        border-radius: .5rem;
        overflow: hidden;
        box-sizing: border-box;
        .slide
          display: flex;
          width: 100%;
          box-sizing: border-box;
          justify-content: space-between;
          & > div
            color: #ffffff;
            text-align: center;
            box-sizing: border-box;
            padding: 0 .5rem;
            font-size: 1.2rem;
            &:nth-of-type(1)
              width: 25%;
            &:nth-of-type(2)
              width: 25%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            &:nth-of-type(3)
              width: 50%;
      .playbtn
        position: absolute;
        left: 5%;
        bottom: 5.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        height: 4rem;
        line-height: 4rem;
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
        background: linear-gradient(to bottom,#c3aa65,#907326);
        border-radius: .5rem;
</style>


<template>
  <div class="home">
    <div class="top-info">
      <div class="top-info-data">
        <span class="key-num bonusIntroduction" @click="rechargebtn(1)">
          <img src="../assets/key1_1.png">
          <em>0</em>
        </span>
        <span class="coin ml5">
          <img class="ml5" src="../assets/coin-eth.png">
          <em>0</em>
        </span>
        <span class="coin ml5">
          <img class="ml5" src="../assets/coin-gtb.png">
          <em>0</em>
        </span>
        <a class="main-email" @click="rechargebtn(0)">
          <img src="../assets/main-email.png">
        </a>
        <a class="main-setting">
          <img src="../assets/setting.png">
        </a>
      </div>
    </div>
    <div class="container">
      <div class="main-show-data">
        <div class="container-logo">
          <swiper :options="swiperOption">
            <swiper-slide>
              <img src="http://redlotto.one/storage/index_images/SHAghswI3dx2mK2DKl0MRkj84WJuaV9pZGv0utHQ.jpeg">
            </swiper-slide>
            <swiper-slide>
              <img src="http://redlotto.one/storage/index_images/KC3F9pytQjDmYWauT2Mrj577fPAmhEWsp7GktGsv.jpeg">
            </swiper-slide>
            <swiper-slide>
              <img src="http://redlotto.one/storage/index_images/zY69WwmAWxvu7hAqdjKa69xV9UWqyRtbQ2qtZkZC.jpeg">
            </swiper-slide>
          </swiper>
        </div>
        <h3>{{isfalse?"奖金池":"分红池"}}</h3>
        <div class="ETH-img">
          <img src="../assets/ico-big-eth.png">
        </div>
        <swiper class="bonus-pool" :options="swiperOptionone">
          <swiper-slide class="slide">
            <strong>{{jiangjin}}</strong>
          </swiper-slide>
          <swiper-slide class="slide">
            <strong>{{fenhong}}</strong>
          </swiper-slide>
        </swiper>
        <strong class="count-down">07:20:39</strong>
      </div>
      <swiper class="data-swiper" :options="swiperOptiontwo">
        <swiper-slide class="slide">
          <div class="data-time">23:50:39</div>
          <div class="data-name">137***com</div>
          <div class="data-price color-red">分红0.0001ETH</div>
        </swiper-slide>
        <swiper-slide class="slide">
          <div class="data-time">23:50:39</div>
          <div class="data-name">137***com</div>
          <div class="data-price color-red">分红0.0001ETH</div>
        </swiper-slide>
      </swiper>
      <p class="playbtn">开始游戏</p>
    </div>
    <mymask v-show="recharge || noticeinfo"></mymask>
    <instructions v-show="recharge"></instructions>
    <notice v-show="noticeinfo"></notice>
  </div>
</template>

<script>
// @ is an alias to /src
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import instructions from '../components/instructions'
import mymask from '../components/mask'
import notice from '../components/notice'
export default {
  data() {
    return {
      noticeinfo:false,
      isfalse:false,
      recharge:false,
      jiangjin:0,
      fenhong:6.04,
      swiperOption: {
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        stopOnLastSlide: false,
        disableOnInteraction: true,
        loop: false,
      },
      swiperOptionone: {
        direction: 'vertical',
        notNextTick: true,
        mousewheel: false,
        allowTouchMove: false,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
        on:{
          transitionEnd: () => {
            this.isfalse = !this.isfalse
          }
        }
      },
      swiperOptiontwo: {
        direction: 'vertical',
        notNextTick: true,
        mousewheel: false,
        allowTouchMove: false,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
      }
    }
  },
  components: {
    swiper,
    instructions,
    mymask,
    notice,
    "swiper-slide":swiperSlide
  },
  methods:{
    rechargebtn(index){
      if(typeof index !== 'number'){
        this.recharge = false;
        this.noticeinfo = false;
        return false
      }
      index?this.recharge = !this.recharge:this.noticeinfo = !this.noticeinfo;
    },
  }
}
</script>
